<!--
 * @Descripttion: 交易设置
 * @Author: xiao li
 * @Date: 2020-09-28 15:24:24
 * @LastEditors: xiao li
 * @LastEditTime: 2022-08-01 14:11:52
-->
<template>
  <div class="lb-system-transaction">
    <top-nav />
    <div class="page-main">
      <lb-tips>
        出租出行{{ result.start_distance }}公里内，起步{{
          result.start_price
        }}元。里程计价：{{ result.distance_price }}元/公里
      </lb-tips>
      <el-form
        @submit.native.prevent
        :model="subForm"
        ref="subForm"
        :rules="subFormRules"
        label-width="120px"
      >
        <el-form-item label="起步距离" prop="start_distance">
          <el-input
            v-model="subForm.start_distance"
            placeholder="请输入起步距离"
          ></el-input>
          <block>公里</block>
        </el-form-item>
        <el-form-item label="起步价" prop="start_price">
          <el-input
            v-model="subForm.start_price"
            placeholder="请输入起步价"
          ></el-input>
          <block>元</block>
        </el-form-item>
        <!-- <el-form-item label="多少免费" prop="distance_free">
          <el-input
            v-model="subForm.distance_free"
            placeholder="请输入起步价"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="里程计价" prop="distance_price">
          <el-input
            v-model="subForm.distance_price"
            placeholder="请输入里程计价"
          ></el-input>
          <block>元/公里</block>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitForm">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateInt = (rule, value, callback) => {
      if (!value || !/^\+?[0-9]*$/.test(value)) {
        callback(new Error('请输入非负整数'))
      } else {
        callback()
      }
    }
    return {
      result: {},
      subForm: {
        distance_free: '',
        distance_price: '',
        start_distance: '',
        start_price: ''
      },
      subFormRules: {
        start_distance: { required: true, validator: this.$reg.valiDateFloat, trigger: 'blur' },
        start_price: { required: true, validator: this.$reg.isMoney, trigger: 'blur' },
        distance_price: { required: true, validator: this.$reg.isMoney, trigger: 'blur' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  methods: {
    async getFormInfo () {
      let { code, data } = await this.$api.system.carConfigInfo()
      if (code !== 200) return
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
      this.result = JSON.parse(JSON.stringify(this.subForm))
    },
    submitForm () {
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          let param = JSON.parse(JSON.stringify(this.subForm))
          this.$api.system.carConfigUpdate(param).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.result = param
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-system-transaction {
  width: 100%;
  .page-main {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 24px;
        .el-select,
        .el-input-number,
        .el-input {
          width: 300px;
        }
      }
      .last-form-item {
        margin-top: 30px;
      }
      .item-tips {
        margin-left: 120px;
        margin-bottom: 24px;
        color: #999999;
      }
    }
  }
}
</style>
